<template>
  <div class="pdf">
    <div>
      <el-button size="mini" style="margin: 20px;" class="back" type="primary" @click="back">返回</el-button>
    </div>
    <div class="content">
      <span class="time" :class="{red: red}" style="padding: 10px 40px">{{formatSeconds(second)}}</span>
      <iframe width="800" height="600" src="/static/pdfjs/web/viewer.html?file=http://www.africau.edu/images/default/sample.pdf"></iframe>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        second: 0,
        timeInterval: null,
        total: 2700, // 阀值字段，超过45分钟
        red: false,
      }
    },
    beforeDestroy() {
      clearInterval(this. this.timeInterval);
    },
    mounted() {
       this.startTime();
    },
    methods: {
      startTime() {
        this.timeInterval = setInterval(() => {
          this.second += 1;
          if(this.second >= this.total) {
            this.red = true;
          }
        }, 1000)
      },
      formatSeconds (value) {
        var theTime = parseInt(value);// 秒
        var middle= 0;// 分
        var hour= 0;// 小时

        if(theTime > 60) {
          middle= parseInt(theTime/60);
          theTime = parseInt(theTime%60);
          if(middle> 60) {
            hour= parseInt(middle/60);
            middle= parseInt(middle%60);
          }
        }
        var result = ""+parseInt(theTime)+"秒";
        if(middle > 0) {
          result = ""+parseInt(middle)+"分"+result;
        }
        if(hour> 0) {
          result = ""+parseInt(hour)+"小时"+result;
        }
        return result;
      },
      back() {
        this.$confirm('此操作将返回上一页, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$router.push({path: '/'});
        }).catch(() => {
        });

      }
    }
  }
</script>
<style>
  .content{
    position: relative;
  }
  .content .time{
    position: absolute;
    top: 40px;
    color: #ffb618;
    right: 40px;
    background: #d2dadd;
    border-radius: 20px;
  }
  .content .red{
    color: red!important;
  }
</style>
